<div nz-row [nzGutter]="8">
  <nz-col [nzSpan]="14">
    <div class="cas" style="width: 660px; height: 360px; overflow:auto">
      <canvas #mycanvas width="800" height="600" (mousemove)="hover($event)">
      </canvas>
    </div>
  </nz-col>
  <nz-col [nzSpan]="10" style="padding: 30px">
    <!-- <sf #sf [schema]="schema" (formSubmit)="submit($event)"></sf> -->
    <div class="title">镜框参数</div>
    <div nz-row>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">镜框宽度 <small class="text-grey">WIDTH</small></h4>
        <nz-input-number [(ngModel)]="form.frameA">
        </nz-input-number>
      </nz-col>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">镜框高度 <small class="text-grey">HEIGHT</small></h4>
        <nz-input-number [(ngModel)]="form.frameB">
        </nz-input-number>
      </nz-col>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">鼻梁间距 <small class="text-grey">DBL</small></h4>
        <nz-input-number [(ngModel)]="form.frameDBL">
        </nz-input-number>
      </nz-col>
    </div>
    <div class="title mt-md">镜片参数</div>
    <div nz-row>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">类型 <small class="text-grey">TYPE</small></h4>
        <nz-select style="width: 100px" [(ngModel)]="form.pg" nzAllowClear>
          <nz-option nzValue="非偏光" nzLabel="非偏光"></nz-option>
          <nz-option nzValue="偏光" nzLabel="偏光"></nz-option>
        </nz-select>
      </nz-col>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">折射率 <small class="text-grey">REFRACTIVITY</small></h4>
        <nz-select style="width: 100px" [(ngModel)]="form.refractivity" nzAllowClear>
          <nz-option nzValue="1.60" nzLabel="1.60"></nz-option>
          <nz-option nzValue="1.67" nzLabel="1.67"></nz-option>
        </nz-select>
      </nz-col>
      <nz-col [nzSpan]="8">
        <h4 class="text-grey-dark" style="color: #616161">基弯 <small class="text-grey">BASEBEND</small></h4>
        <nz-select style="width: 100px" [(ngModel)]="form.baseBend" nzAllowClear>
          <nz-option nzValue="2" nzLabel="2"></nz-option>
          <nz-option nzValue="4" nzLabel="4"></nz-option>
          <nz-option nzValue="6" nzLabel="6"></nz-option>
        </nz-select>
      </nz-col>
    </div>
    <button class="mt-md" nzSize="large" nz-button type="button" nzType="primary" (click)="submit()">
      提交
    </button>
  </nz-col>
</div>
<div nz-row [nzGutter]="8">
  <div nz-col [nzSpan]="12">
    <div class="title mt-md" style="margin-left: 24px ; margin-right: 24px">左眼处方信息 <small>LEFT</small></div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">球镜 <small class="text-grey">SPH</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.25" [nzMin]="-10" [nzMax]="0" [(ngModel)]="form.sph"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.25" [nzMin]="-10" [nzMax]="0" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form.sph">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">柱镜 <small class="text-grey">CYL</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.25" [nzMin]="-4" [nzMax]="0" [(ngModel)]="form.cyl"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.25" [nzMin]="-4" [nzMax]="0" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form.cyl">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">瞳距 <small class="text-grey">PD</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.5" [nzMin]="20" [nzMax]="45" [(ngModel)]="form.pd"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.5" [nzMin]="20" [nzMax]="45" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form.pd">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">瞳高 <small class="text-grey">PH</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.5" [nzMin]="10" [nzMax]="40" [(ngModel)]="form.ph"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.5" [nzMin]="10" [nzMax]="40" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form.ph">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">轴位 <small class="text-grey">AXIS</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="1" [nzMin]="0" [nzMax]="180" [(ngModel)]="form.axis"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="1" [nzMin]="0" [nzMax]="180" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form.axis">
        </nz-input-number>
      </nz-col>
    </div>
  </div>
  <div nz-col [nzSpan]="12" style="padding-left: 24px; padding-right: 24px">
    <div class="title mt-md" style="margin-left: 24px ; margin-right: 24px">右眼处方信息 <small>RIGHT</small></div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">球镜 <small class="text-grey">SPH</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.25" [nzMin]="-10" [nzMax]="0" [(ngModel)]="form1.sph"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.25" [nzMin]="-10" [nzMax]="0" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form1.sph">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">柱镜 <small class="text-grey">CYL</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.25" [nzMin]="-4" [nzMax]="0" [(ngModel)]="form1.cyl"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.25" [nzMin]="-4" [nzMax]="0" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form1.cyl">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">瞳距 <small class="text-grey">PD</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.5" [nzMin]="20" [nzMax]="45" [(ngModel)]="form1.pd"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.5" [nzMin]="20" [nzMax]="45" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form1.pd">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">瞳高 <small class="text-grey">PH</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="0.5" [nzMin]="10" [nzMax]="40" [(ngModel)]="form1.ph"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="0.5" [nzMin]="10" [nzMax]="40" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form1.ph">
        </nz-input-number>
      </nz-col>
    </div>
    <div nz-row style="margin-left: 24px ; margin-right: 24px">
      <h4 class="text-grey-dark" style="color: #616161">轴位 <small class="text-grey">AXIS</small></h4>
      <nz-col [nzSpan]="18">
        <nz-slider [nzStep]="1" [nzMin]="0" [nzMax]="180" [(ngModel)]="form1.axis"></nz-slider>
      </nz-col>
      <nz-col [nzSpan]="4">
        <nz-input-number [nzStep]="1" [nzMin]="0" [nzMax]="180" [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="form1.axis">
        </nz-input-number>
      </nz-col>
    </div>
  </div>
</div>
